import { useEffect, useState } from "react";
import styles from './style.module.css'

type ISelector = {
    data: Record<string, any>;
    activeIndex: number;
    handleChangeIndex: (index: number) => void;
    visible: boolean
}

function Selector({ data, activeIndex, handleChangeIndex, visible }: ISelector) {
    if (!visible) return
    const [move, setMove] = useState(false)
    useEffect(() => {
        setMove(visible)
    }, [visible])

    return (
        <>
            <div
                className="fixed top-0 left-0 w-[100vw] h-[100vh] z-1"
                style={{
                    backgroundColor: "rgba(0,0,0,.7)"
                }}
            ></div>
            <div className={`fixed 
                bottom-0 
                bg-white 
                z-1 
                w-full 
                flex 
                flex-col 
                max-h-[40%] 
                overflow-y-scroll
                rounded-t-[20px]
                ${styles.bottom}
                ${move && styles.top}`}
            >
                {data.map((item, index) => {
                    return <p
                        className={`h-[100px] 
                            leading-[100px] 
                            pl-[20px]   
                            text-[35px]
                            ${activeIndex === index ? 'text-sky-600' : ''}`}
                        key={item.id}
                        onClick={() => {
                            setMove(false)
                            const timer = setTimeout(() => {
                                handleChangeIndex(index)
                                clearTimeout(timer)
                            }, 300)
                        }}
                    >
                        {item.storename}
                    </p>
                })}
            </div>
        </>
    )
}
export default Selector